import { Component, ReactNode } from "react"
import { getImpliedNodeFormatForFile } from "typescript"

export default function App() { 
    return <>
    <Father></Father>
    {/* <Child></Child> */}
    </>
}

//这是函数组件传值的方式
// interface ChildProps {
//     setDataFn: (value: string) => void; // 定义参数和返回值类型
// }
// function Child(props:ChildProps) { 
//     return <>
//     <div className="Child">这是儿子-----</div>
//     <button onClick={() => props.setDataFn("香蕉")}>给父亲送礼</button>
//     </>
// }

//这是类组件给父亲传值
class Child extends Component{ 
    props={
        setDataFn: (value: string) => {}
    }
    render() { 
        return <>
        <div className="Child">这是儿子-----</div>
        <button onClick={() => this.props.setDataFn("香蕉")}>给父亲送礼</button>
        </>
    }
}

class Father extends Component{ 
    state={
        gift:"苹果"
    }
    //定义一个接收儿子参数的方法，要用箭头函数，否则this指向有问题
    getData=(value:string)=>{
        this.setState({
            gift:value
        })
    }
    render(): ReactNode {
        return <>
        <div className="Father">这是父亲----父亲自己的礼物{this.state.gift}</div>
        <hr />
        <Child setDataFn={this.getData}></Child>
        </>
    }

}